<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>添加功能</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/begtable.css" />
</head>
<body>
<div class="layui-box admin-main site-text site-block">
        <form class="layui-form layui-form-pane" method="post">
            <input type="hidden" name="functionId" value="${func.functionId!}">
            <div class="layui-form-item" pane>
                <label class="layui-form-label">调用方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="locationType" value="1" lay-filter="locationType" title="页按钮" <#if func.locationType == 1>checked</#if>/>
                    <input type="radio" name="locationType" value="2" lay-filter="locationType" title="行按钮" <#if func.locationType == 2>checked</#if>/>
                    <input type="radio" name="locationType" value="3" lay-filter="locationType" title="纯JSON请求" <#if func.locationType == 3>checked</#if>/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="title" title="功能标题" value="${func.title!}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="permissions" required title="功能标题" value="${func.permissions!}">
                </div>
            </div>
            <div class="layui-form-item" id="define_page" <#if func.locationType==3> style="display: none" </#if>>
                <label class="layui-form-label">指定页面</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="pageId" required value="${func.pageId!}">
                </div>
            </div>
            <div class="layui-form-item" id="func_type" <#if func.locationType==3> style="display: none"</#if>>
                <label class="layui-form-label">功能类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="1" lay-filter="filter" title="弹窗" <#if func.type == 1>checked</#if>/>
                    <input type="radio" name="type" value="2" lay-filter="filter" title="页面请求" <#if func.type == 2>checked</#if>/>
                </div>
            </div>

            <div class="layui-form-item" id="json-part" <#if func.locationType!=3>style="display: none" </#if>>
                <div id="sql-part">
                <#if func.sqls??>
                    <#list func.sqls as sql>
                        <label class="layui-form-label">SQL${sql_index}</label>
                        <div class="layui-input-block">
                            <textarea  class="layui-textarea">${sql}</textarea>
                        </div>
                    </#list>
                <#else >
                    <label class="layui-form-label">SQL0</label>
                    <div class="layui-input-block">
                        <textarea  class="layui-textarea"></textarea>
                    </div>
                </#if>
                </div>
            </div>


            <fieldset class="layui-elem-field layui-field-title" id="win-part" <#if func.type??><#if func.type == 2 && func.locationType!=3>style="display: none;"</#if><#else >style="display: none;"</#if>>
                <legend>弹窗</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">页面参数</label>
                        <div class="layui-input-block">
                            <input class="layui-input" placeholder="pages.htm?id=" value="${func.redirectTo}">
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field layui-field-title" id="fun-part" <#if func.type??><#if func.type == 1 && func.locationType!=3>style="display: none;"</#if><#else >style="display: none;"</#if>>
                <legend>请求</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <div id="sql-part">
                            <#list func.sqls as sql>
                                <label class="layui-form-label">SQL${sql_index}</label>
                                <div class="layui-input-block">
                                    <textarea class="layui-textarea">${sql}</textarea>
                                </div>
                            </#list>
                        </div>
                        <a href="javascript:addSql();" class="layui-btn" style="width: 418px;">+SQL</a>
                    </div>
                    <hr>
                    <div class="layui-form-item">
                        <label class="layui-form-label">前端</label>
                        <div class="layui-input-block" id="face-part">
                            <textarea class="layui-textarea" id="htm_edt">${func.jsScript!}</textarea>
                        </div>
                    </div>
                </div>
            </fieldset>

        </form>
        <div class="layui-box">
            <button class="layui-btn layui-btn-normal" onclick="sbmt_form()">提交</button>
        </div>
</div>
<script type="text/javascript" src="/js/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/plugins/layer/layer.js"></script>
<script type="text/javascript" src="/js/custom_common.js"></script>
<script>
    layui.config({
        base: '/js/'
    });

    layui.use(['form'], function() {
        var form = layui.form();

        form.on('radio(filter)', function (data) {
            var $win = $('#win-part');
            var $fun = $('#fun-part');
            if (data.value == 1) {
                $win.show();
                $fun.hide();
            } else if(data.value==2){
                $fun.show();
                $win.hide();
            }else{
                $fun.hide();
                $win.hide();
            }
        });

        form.on('radio(locationType)', function (data) {
            var $page = $('#define_page');
            var $type = $('#func_type');
            var $win = $('#win-part');
            var $fun = $('#fun-part');
            var $sql = $('#json-part');
            if (data.value == 3) {
                $page.hide();
                $type.hide();
                $fun.hide();
                $win.hide();
                $sql.show();
            } else {
                $page.show();
                $type.show();
                $sql.hide();
            }
        });
    });
    var index = 0;
    <#if func ??>
        index = ${func.sqls?size};
    </#if>
    function addSql() {
        var html = '<label class="layui-form-label">SQL' + index++ + '</label>' +
                '<div class="layui-input-block">' +
                '<textarea class="layui-textarea"></textarea>' +
                '</div>';
        $('#sql-part').append($(html));
    }

    function sbmt_form() {
        var params = $('form').serializeObject();
        if (params.type == 2||params.locationType == 3) {
            params.sqls = [];
            $('#sql-part textarea').each(function (i) {
                var sql = $(this).val();
                sql = sql.replace(/\s+/g, ' ');
                params['sqls['+i+']'] = sql;
            });
            var htm = $('#face-part textarea').val();
            params.jsScript = encodeURIComponent(htm);
        } else {
            var v = $('#win-part input').val();
            if (v !== '')
                params.redirectTo=encodeURIComponent(v);
        }
        console.log(params);
        $.post('/diy/addfunc.json',params, function (data) {
            var layer = parent.layer;
            if (data.result ==='success'){
                parent.window.location.reload();
                layer.close(layer.getFrameIndex(window.name));
            } else {
                layer.msg(data.msg);
            }

        })
    }
</script>
</body>

</html>